<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="#" />
</head>
<body style=" background: url(https://qpp-img.oss-cn-beijing.aliyuncs.com/cat.jpg?x-oss-process=style/20bl) no-repeat center center fixed; ">

<div class="modal-dialog" style="margin-top: 15%;">
    <div class="modal-content" style="width: 390px; margin: auto;">
        <div class="modal-header">

            <h4 class="modal-title text-center" id="myModalLabel">登录</h4>
        </div>
        <form name="loginForm" method="post" th:action="${loginProcessUrl}">
            <div class="modal-body" id="model-body">
                <div class="form-group">
                    <input type="text" name="username" class="form-control" placeholder="用户名" autocomplete="off">
                </div>
                <div class="form-group">

                    <input type="password" name="password" class="form-control" placeholder="密码" autocomplete="off">
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-group">
                    <button  type="submit" class="btn btn-primary form-control">登录</button>
                </div>
            </div>
        </form>
        <p style="color: red" th:if="${param.error}">用户名或密码错误</p>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</body>
</html>